<template>
  <view class="wrap">
    <u-section color="rgb(61, 155, 246)" title="推荐资讯" sub-title="查看更多" @click="toList"></u-section>
    <view class="c-content" v-for="(item, key) in flowList">
      <view class="cot-box">
        <view>
          <image style="width: 200rpx;height: 160rpx;"
                 :src="item.image"></image>
        </view>
        <view class="cot-box-2">
					<span>
						{{item.title}}
					</span>
          <view class="bot-detail">
            <span style="color: #999999;font-size: 26rpx;">
              <u-icon name="eye"></u-icon>
              999人查看
            </span>
            <span class="cot-btn" @click="toDetail(item)">查看详情</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flowList: [

      ]
    }
  },
  created() {
    uni.showLoading({
      title: '加载中',
      mask: true,
      duration: 0
    })
    this.$api.newsList({
      type: 'recommend',
      status: 0
    }).then(res => {
      this.flowList = res.map(el => {
        return {
          ...el,
          image: el.image
        }
      })
    }).catch(err => {
      console.log(err)
    }).finally(() => {
      uni.hideLoading()
    })
  },
  methods: {
    toList() {
      this.$u.route({
        type: 'navigateTo',
        url: '/pages/news/list',
        params: {
          type: 'recommend'
        }
      })
    },
    toDetail(item) {
      this.$u.route({
        type: 'navigateTo',
        url: '/pages/news/detail',
        params: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-content {
  width: auto;
  margin: 15rpx 0rpx;
  background-color: #ffffff;
  border-radius: 10rpx;

  .cot-box {
    padding: 24rpx;
    display: flex;
    flex-direction: row;

    .content-img {
      width: 240rpx;
      height: 160rpx;
      border-radius: 20rpx;
      overflow: hidden;
    }

    .cot-box-2 {
      height: 160rpx;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 25rpx;
      font-size: 24rpx;
      .bot-detail {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cot-btn {
          background-color: #d8ebff;
          border-radius: 24rpx;
          cursor: pointer;
          color: #007aff;
          font-size: 24rpx;
          padding: 4rpx 24rpx;
        }
      }
    }
  }

}
</style>
